<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>

<link rel="stylesheet" href="./resource/layui/css/layui.css">
<link rel="stylesheet" href="./resource/css/userinfo.css">

<style type="text/css">
/* *{margin: 0;} */
#div1 {
	width: 400px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -100px;
}

#facelogin {
	width: 400px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 20%;
	margin-left: -200px;
	margin-top: -70px;
	border-radius: 6px;
	text-align: center;
	line-height: 200px;
	font-size: 55px;
}

#punchmsg {
	width: 400px;
	height: 200px;
	position: relative;
	text-align: center;
	left: 148px;
	top: 175px;
	margin-top: 306px;
	left: 148px;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">
				<img src="./resource/image/logo.png"
					style="width: 200px; height: 58px;">
			</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<iframe id="tianqi" allowtransparency="true" frameborder="0"
					width="410" height="60" scrolling="no"
					src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=2&bd=0&k=&f=ffffff&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=59134&w=410&h=60&align=center"></iframe>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img">
						${sessionScope.emp.empname}
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="UserInfo.jsp">修改个人信息</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="login.jsp">退出</a></li>
			</ul>
		</div>


		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-shrink="all"
					lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed"><a class=""
						href="javascript:;"><i class="layui-icon"> &#xe637; </i>考勤</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="punch.jsp" class="layui-this">打卡</a>
							</dd>
							<c:if test="${sessionScope.emp.position!='员工'}">
								<dd>
									<a href="Hrpattence.jsp">员工考勤查看</a>
								</dd>
							</c:if>
							<dd>
								<a href="MyselfPattence.jsp">自我考勤查看</a>
							</dd>
						</dl></li>

					<li class="layui-nav-item"><a href="javascript:;"><i
							class="layui-icon">&#xe613; </i>请假管理</a>
						<dl class="layui-nav-child">
							<a href="leavetest.jsp"></i>请假申请</a>
							<c:if
								test="${sessionScope.emp.position!='员工'&&sessionScope.emp.position!='人事'}">
								<dd>
									<a href="LeaveList.jsp">请假审批</a>
								</dd>
							</c:if>
							<c:if test="${sessionScope.emp.position!='经理'}">
								<dd>
									<a href="LeaveMsg.jsp">请假信息查看</a>
								</dd>
							</c:if>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;"><i
							class="layui-icon">&#xe716; </i>管理</a>
						<dl class="layui-nav-child">
							<c:if
								test="${sessionScope.emp.position!='员工'&&sessionScope.emp.position!='经理'}">
								<dd>
									<a href="GetEmps.jsp">员工管理</a>
								</dd>
							</c:if>
							<c:if test="${sessionScope.emp.position!='员工'}">
								<dd>
									<a href="GetDepts.jsp">部门管理</a>
								</dd>
							</c:if>
							<dd>
								<a href="UserInfo.jsp">个人信息管理</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="Note.jsp">公告</a></li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-container" id="div1">
				<!-- 第一行开始 -->
				<div align="center">
					<div class="layui-row">
						<span data-method="offset" data-type="auto"
							class="layui-btn layui-btn-normal" id="facelogin">人脸识别打卡</span>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md9">
						<span id="punchmsg">${emp.msg}</span>
					</div>
				</div>
			</div>
			<div class="layui-footer">
				<!-- 底部固定区域 -->
				© 中软 - JAVA二阶段项目 - 基于人脸识别的考勤系统 by TeamWork_XM
			</div>
		</div>
		<script src="./resource/layui/layui.js"></script>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;
			});

			//图片上传
			layui
					.use(
							'upload',
							function() {
								var $ = layui.jquery, upload = layui.upload;

								//普通图片上传
								var uploadInst = upload
										.render({
											// 选择器s
											elem : '#test1',
											url : 'https://httpbin.org/post' //改成您自己的上传接口
											,
											accept : 'images' //视频
											,
											data : {
												'id' : 'xxx'
											} //跟着员工的id一起传图片才知道这是谁的图片
											,
											auto : false //是否自动上传
											,
											bindAction : '#test9' // 绑定的上传那妞
											,
											choose : function(obj) {
												//预读本地文件示例，不支持ie8
												obj.preview(function(index,
														file, result) {
													$('#demo1').attr('src',
															result); //图片链接（base64）
												});
											},
											done : function(res) {
												//如果上传失败
												if (res.code > 0) {
													return layer.msg('上传失败');
												}
												//上传成功
											},
											error : function() {
												//演示失败状态，并实现重传
												var demoText = $('#demoText');
												demoText
														.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
												demoText
														.find('.demo-reload')
														.on(
																'click',
																function() {
																	uploadInst
																			.upload();
																});
											}
										});
							});
			// 表单提交
			layui.use('form', function() {
				var form = layui.form;
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});

			//打卡跳转页面
			function punch() {
				window.location.href = "punch.jsp";
			}

			//弹出层
			layui.use('layer', function() { //独立版的layer无需执行这一句
				var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

				//触发事件
				var active = {
					offset : function(othis) {
						var type = othis.data('type'), text = othis.text();
						layer.open({
							title : '人脸识别登录',
							type : 2,
							offset : type
							//,id: 'layerDemo'+type //防止重复弹出
							,
							anim : 5 //弹窗特效
							,
							content : 'facelogin.jsp' //ifame的页面
							,
							maxmin : true,
							area : [ '1280px', '720px' ]
							//, shadeClose: true
							,
							btn : '关闭',
							btnAlign : 'c' //按钮居中
							,
							shade : 0.1 //不显示遮罩
							,
							yes : function() {
								layer.closeAll();
							}
						});
					}
				};
				$('#facelogin').on('click', function() {
					var othis = $(this), method = othis.data('method');
					active[method] ? active[method].call(this, othis) : '';
				});

			});
		</script>
</body>

</html>
